﻿@using ZoomLa.Components
@using ZoomLa.Controls
@model ZoomLa.SQLDAL.SQL.PageSetting
@{
    Layout = "~/Views/App/_layout.cshtml";
}
@section head{
    <title>定制效果</title>
}
@section content{
<div class="panel panel-default">
    <div class="panel-heading">
        <div id="stepbar" style="padding-left: 140px; margin-bottom: 10px;">
            <ul class="step_bar">
                <li class="step g_step1"><a class="g_a_step1" href="javascript:;"><i class="fa fa-desktop"></i>指定链接</a></li>
                <li class="green_line"></li>
                <li class="step g_step2"><a class="g_a_step2" href="javascript:;"><i class="fa fa-paint-brush active"></i>定制效果</a></li>
                <li class="green_line"></li>
                <li class="step step3"><a class="a_step3" href="javascript:;"><i class="fa fa-android"></i>生成APP</a></li>
                <li>
                    <a href="APPList" class="btn btn-info" style="margin-top:8px;">我的APP</a>
                </li>
            </ul>
            <div style="clear: both;"></div>
        </div>
    </div>
    <ul class="nav nav-tabs hidden-xs hidden-sm">
        <li class="active"><a onclick="javascript:;" href="#tab0" data-toggle="tab">基本配置</a></li>
        <li><a onclick="javascript:;" href="#tab1" data-toggle="tab">模板选择</a></li>
    </ul>
    <div class="panel-body tab-content" style="padding:0px;">
        <div class="col-lg-6 col-md-6 mobile">
            <iframe src="@ViewBag.ifrsrc" style="border: none; width: 275px; height: 463px; background-color: #fff; overflow-x: hidden" id="url_ifr"></iframe>
        </div>
        <div id="tab0" data-step="1" class="stepitem tab-pane active col-lg-6 col-md-6">
            @if (ViewBag.chkdomain || ViewBag.chkauth)
            {
                <form method="post" action="@MVCHelper.GetAction("App_Create",Request)" onsubmit="return CheckSubmit();"></form>
                <table class="table table-bordered table-striped" id="hasauth_div">
                    <tr>
                        <td>APP名称：</td>
                        <td>
                            <input type="text" id="appname" name="appname" class="form-control required" value="@SiteConfig.SiteInfo.SiteName" title="APP名称不能为空" />
                        </td>
                    </tr>
                    <tr>
                        <td class="td_md">图标：</td>
                        <td>
                            @Html.Partial("C_SFileUP", new C_SFileUP { FileType = "img", UP_After = "changeIcon", ID = "APPIcon_F" })
                            <input type="hidden" id="appicon" name="appicon" />
                            <script>
                            function changeIcon(data) {
                                $("#appicon_img").attr("src", data);
                                $("#appicon").val(data);
                            }
                            </script>
                            <img src="" class="img50" id="appicon_img" />
                            <span class="rd_green">宽高45px-80px之间的png图片.<br />请勿上传违法、违规、未获得授权或与推广无关内容</span>
                        </td>
                    </tr>
                    <tr><td colspan="2" class="text-center">高级选项</td></tr>
                    <tr>
                        <td class="td_md">启动图片：</td>
                        <td>
                            @Html.Partial("C_SFileUP", new C_SFileUP { FileType = "img", UP_After = "changeSplash", ID = "Splash_F" })
                            <input type="hidden" id="splash" name="splash" />
                            <script>
                            function changeIcon(data) {
                                $("#splash_img").attr("src", data);
                                $("#splash").val(data);
                            }
                            </script>
                            <img src="" class="img50" id="splash_img" />
                        </td>
                    </tr>
                    <tr>
                        <td>作者：</td>
                        <td>
                            <input type="text" id="author" name="author" class="form-control" />
                        </td>
                    </tr>
                    <tr>
                        <td>APP描述：</td>
                        <td>
                            <textarea id="description" name="description" class="form-control" rows="4"></textarea>
                        </td>
                    </tr>
                    <tr><td>模板选择：</td></tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="上一步" onclick="ZL_Step.Pre();" class="btn btn-primary" />
                            <input type="submit" class="btn btn-primary" value="生成APP" />
                        </td>
                    </tr>
                </table>
            }
            else
            {
                <div id="noauth_div" class="margin_t10">
                    <ul class="list-unstyled" id="option_ul">
                        <li>
                            <div class="opmenu" style="background: rgb(153, 153, 255);" title="开始学习">
                                <a target="_blank" href="http://www.z01.com/PhoneGap/">
                                    <i class="fa fa-copyright"></i>
                                    Zoomla!逐浪CMS基于全球领先的移动跨平台解决方案，并提供丰富的线上移动开发文档库【开始学习】
                                </a><span class="clearfix"></span>
                            </div>
                        </li>
                        <li>
                            <div class="opmenu" style="background: rgb(102, 153, 51);" title="点击访问">
                                <a target="_blank" href="http://www.z01.com/server">
                                    <i class="fa fa-tasks"></i>
                                    购买商业授权进行企业级部署【立即购买】
                                </a><span class="clearfix"></span>
                            </div>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="alert alert-danger" style="display:none;">站点未授权,无法本地生成APP,你可以申请授权或在线生成APP,如果你已有授权码<a href="@(CustomerPageAction.customPath2 + "Config/SiteOption.aspx?Tab=2")">[点此配置]</a></div>
                </div>
            }
        </div>
        <div id="tab1" class="tab-pane col-lg-6 col-md-6">
            @Html.Partial("Step2_List",Model)
        </div>
    </div>
</div>
@if (!ViewBag.chkdomain)
{
    <div class="alert alert-danger" id="remind_sp">
        如需在服务器布署APP生成功能,请先布署好Android与PhoneGap环境,你也可以使用<a href="http://app.z01.com/APP/AddAPP.aspx" target="_blank">[线上版本]</a>生成APP
    </div>
}
}
@section script{
<link href="/App_Themes/V3.css" rel="stylesheet" />
<style type="text/css">
    #option_ul { padding-top: 20px; }
    #option_ul li { margin-bottom: 10px; }
    #option_ul .opmenu { padding: 10px; border-radius: 5px; height: 70px; }
    #option_ul .opmenu a { color: #fff; }
    #option_ul .opmenu a i { font-size: 50px; float: left; padding-right: 10px; }
    .remindDiv { font-size: 16px; color: #fff; margin-bottom: 5px; }
    .font14 { font-size: 14px; font-weight: normal; }
    .img50 { width: 50px; height: 50px; display: none; }
    .step_bar { list-style-type: none; margin: 0; list-style: none; }
    .step_bar .fa { font-size: 25px; padding-right: 5px; }
    .step_bar .fa.active { color: green; }
    .step_bar li { float: left; }
    .step_bar .step { width: 90px; padding-top: 10px; }
    .green_line { background: url(/App_Themes/Admin/Mobile/green_line.png) no-repeat 0 23px; width: 44px; height: 24px; }
    .mobile { background: url(/App_Themes/User/bg_mobile.png) no-repeat; width: 327px; height: 674px; padding-left: 25px; padding-top: 120px; }

    .step1 { background: url(/App_Themes/Admin/Mobile/banner_11.png) no-repeat; width: 100%; height: 420px; padding-top: 180px; padding-left: 650px; }
    .stepitem { display: none; }
    .stepitem.active { display: block; }
    .remind div { margin-bottom: 3px; }
</style>
<script src="/JS/ZL_Regex.js"></script>
<script src="/JS/Controls/ZL_Dialog.js"></script>
<script src="/JS/ICMS/ZL_Common.js"></script>
<script>
        //提交前检测
        function CheckSubmit() {
            if (ZL_Regex.isEmpty($("#APPIcon_F").val())) {
                alert("未指定图标"); return false;
            }
            ShowWait();
            return true;
        }
        function ShowWait() {
            var wait = new ZL_Dialog();
            wait.closebtn = false;
            wait.maxbtn = false;
            wait.ShowMask("正在提交申请,请等待提交完成");
        }
        //-----步骤方法,后期整合,暂定页面只有一个控件
        //从1开始
        var ZL_Step = {};
        ZL_Step.Next = function (callback) {
            var $step = $(".stepitem.active");
            var num = parseInt($step.data("step")) + 1;
            ZL_Step.ShowByNum(num, callback);
        }
        ZL_Step.Pre = function (callback) {
            var $step = $(".stepitem.active");
            var num = parseInt($step.data("step")) - 1;
            if (num < 1) { stepnum = 1; }
            ZL_Step.ShowByNum(num, callback);
        }
        //显示指定步骤
        ZL_Step.ShowByNum = function (num, callback) {
            var $step = $(".stepitem[data-step=" + num + "]");
            $(".stepitem").removeClass("active");
            $(".stepitem").hide();
            $step.addClass("active");
            $step.show();
            if (callback) { callback(); }
        }
        //----------------显示图像
        $(function () {
            var isPng = function (fname) {
                if (!fname || fname == "" || fname.indexOf(".") < 0) { return false; }
                fname = fname.toLowerCase();
                var start = fname.lastIndexOf(".");
                var ext = fname.substring((start + 1), fname.length);//jpg|png|gif
                return (ext == "png");
            }
            var ShowImg = function (imgid, base64) {
                $("#" + imgid).show(); $("#" + imgid).attr('src', base64);
            }
            $("input[type=file][data-img]").change(function (e) {
                var fname = $(this).val();
                if (!isPng(fname)) { $(this).val(""); alert("请使用png图片"); return false; }
                var imgid = $(this).data("img");
                var file = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    ShowImg(imgid, e.target.result);
                }
                reader.readAsDataURL(file);
            });
            $(".allchk_l").html('<input type="radio" value="0" name="idrad" checked="checked">不使用模板');

            $("form").validate();
        });
</script>
}